<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery淡入淡出特效</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    p {
        position: relative;
        width: 400px;
        height: 90px;
    }

    div {
        position: absolute;
        width: 400px;
        height: 65px;
        font-size: 36px;
        text-align: center;
        color: yellow;
        background: red;
        padding-top: 25px;
        left: 0;
        display: none;
    }

    span {
        display: none;
    }
    </style>
</head>

<body>
    <h1>jQuery淡入淡出特效</h1>
    <p>
        too young, too simple，sometimes naive。 (<a href="#">click!</a>)
        <div><span>CENSORED!</span></div>
    </p>
    <script>
    $(function() {
        var t = $('p').position().top + 'px';
        var l = $('p').position().left + 'px';
        $('div').css({
            'top': t,
            'left': l
        });
    });
    $("a").click(function() {
        $("div").fadeIn(3000, function() {
            $("span").fadeIn(100);
        });
        return false;
    });
    </script>
</body>

</html>
